/**
 * 将后台数据进行初步处理
 */
class Goods{
	constructor(goods){
		this.goods=goods
		this.chooseNum=0
	}
	insNum(){
		this.chooseNum++
	}
	unInsNum(){
		this.chooseNum--
	}
	count(){
		return this.chooseNum*this.goods.price
	}
}
/**
 * 以后台数据为基础，创建ui数据
 */
class UiData{
	constructor(){
		//初始化商品列表
		this.goods=[]
		goods.forEach(obj=>{
			this.goods.push(new Goods(obj))
		})
		//初始化商品数量
		this.count=0
		//初始化总价
		this.allPrice=0
		//初始化配送费
		this.distribution=5
		//初始化起送费
		this.beginSend=30
		//初始化差价
		this.difference=this.beginSend
	}
	/**
	 * 计算数量
	 */
	computeCount(){
		let num=0
		this.goods.forEach(obj=>{
			num+=obj.chooseNum
		})
		this.count=num
	}
	/**
	 * 计算总价
	 */
	computeAllPrice(){
		let allPrice=0
		this.goods.forEach(obj=>{
			allPrice+=obj.count()
		})
		this.allPrice=allPrice
	}
	/**
	 * 计算差价
	 */
	computeDifference(){
		this.difference=this.beginSend-this.allPrice
	}
	
}

class Ui{
	constructor(){
		this.uiData=new UiData();
		this.dom={
			goodsList:document.querySelector(".goods-list"),
			badge:document.querySelector(".footer-car-badge"),
			car:document.querySelector(".footer-car"),
			total:document.querySelector(".footer-car-total"),
			pay:document.querySelector(".footer-pay"),
			tip:document.querySelector(".footer-car-tip"),
		}
		this.initGoodsList()
	}
	initGoodsList(){
		let item=''
		this.uiData.goods.forEach(obj=>{
			let goods=obj.goods
			item+=`
				<div class="goods-item">
					<img src="${goods.pic}" alt="" class="goods-pic" />
					<div class="goods-info">
					<h2 class="goods-title">${goods.title}</h2>
					<p class="goods-desc">${goods.desc}</p>
					<p class="goods-sell">
						<span>月售 ${goods.sellNumber}</span>
						<span>好评率${goods.favorRate}%</span>
					</p>
					<div class="goods-confirm">
						<p class="goods-price">
						<span class="goods-price-unit">￥</span>
						<span>${goods.price.toFixed(2)}</span>
						</p>
						<div class="goods-btns">
						<i class="iconfont i-jianhao"></i>
						<span>0</span>
						<i class="iconfont i-jiajianzujianjiahao"></i>
						</div>
					</div>
					</div>
				</div>
			`
		})
		this.dom.goodsList.innerHTML=item
	}
	//更新索引数据
	upItem(index){
		if(this.uiData.goods[index].chooseNum>0){
			this.dom.goodsList.children[index].classList.add("active")
			this.dom.car.classList.add("active")
			this.dom.goodsList.children[index].querySelector(".goods-btns span").textContent=`${this.uiData.goods[index].chooseNum}`
		}else{
			this.dom.goodsList.children[index].classList.remove("active")
			this.dom.car.classList.remove("active")
		}
		this.car()
	}
	add(index){
		this.uiData.goods[index].insNum()
		this.upItem(index)
	}
	unAdd(index){
		if(this.uiData.goods[index].chooseNum>0){
			this.uiData.goods[index].unInsNum()
		}
		this.upItem(index)
	}
	car(){//footer-car
		this.uiData.computeAllPrice()
		this.uiData.computeCount()
		this.uiData.computeDifference()
		this.dom.badge.textContent=this.uiData.count
		this.dom.total.textContent=this.uiData.allPrice.toFixed(2)
		if(this.uiData.difference<=0){
			this.dom.pay.classList.add("active")
		}else{
			this.dom.pay.classList.remove("active")
		}
		this.dom.pay.querySelector('span').textContent=`还差￥${this.uiData.difference.toFixed(2)}起送`
		this.dom.tip.textContent=`配送费￥${this.uiData.distribution.toFixed(2)}`
	}
}
var ui=new Ui()